<!--分组管理-->
<template>
  <div class="minW1060-auto bg-fff mt10">
    <div class="pad20 ml10">
      <el-row>
        <el-col :span="18">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item class="font-bold">分组管理</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="6" align="right">
          <div class="grid-content bg-purple-light">
            <div class="dlblock-mb20 pr10 ml20">
              <el-button type="primary" @click="addFn">添加</el-button>
            </div>
            <div class="dlblock-mb20 pr10">
              <el-button type="danger" @click="delGroupsFn">删除</el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <!--表格-->
      <el-row>
        <el-table class="my-table"
                  :data="groupList"
                  v-loading="loading"
                  :header-row-class-name="'my-table-checked'"
                  @selection-change="handleSelectionChange"
                  @cell-click="cellChange"
                  ref="myTable">
          <el-table-column type="selection" align="center" ref="checkSwitch" class="fixed-right" fixed
                           width="65">
            <template slot-scope="{row}">
              <label role="checkbox" class="el-checkbox is-checked">
                                <span aria-checked="mixed" class="el-checkbox__input  mydeal">
                                    <span class="el-checkbox__inner" @click="checkMethod($event,row.index)"></span>
                                    <span class="checkbox" v-text="row.index"></span>
                                    <input type="checkbox" aria-hidden="true" class="el-checkbox__original" value="">
                                </span>
              </label>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="分组名称">
            <template slot-scope="{row}">
              <i v-if="row.plus" class="el-icon-circle-plus-outline plus"></i>
              <i v-else class="el-icon-remove-outline plus"></i>
              <span v-if="row.flag">{{ row.name }}</span>
              <el-input v-else v-model="row.name" size="medium"
                        style="width: 180px;"
                        class="input-text"
                        maxlength="10"
                        :value="row.name"
                        autofocus
                        clearable>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="typeName" label="分组类型">
            <template slot-scope="{row}">
              <div v-if="row.flag">{{ row.typeName }}</div>
              <el-select v-else @change="dropChange(row)"
                         v-model="row.type"
                         class="select-text"
                         style="width: 180px"
                         placeholder="请选择">
                <el-option v-for="(item, index) in groupTypes" :key="index"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="carNum" label="车辆数">
          </el-table-column>
          <el-table-column align="center" prop="deviceNum" label="设备数">
          </el-table-column>
          <el-table-column align="center" prop="personNum" label="人员数">
          </el-table-column>
          <el-table-column align="center" label="操作" fixed="right">
            <template slot-scope="{row}">
              <div v-if="row.flag">

                <el-button type="text" style="color: #EE9900" @click="addSubRole(row)">添加子分组</el-button>
                <el-button type="text" @click="row.flag=!row.flag">编辑</el-button>
                <el-button type="text" style="color: #f56c6c" @click="delGroupFn(row.id)">删除</el-button>
              </div>
              <div v-else>
                <el-button type="text" style="color: #EE9900" @click="addSubRole(row)">添加子分组</el-button>
                <el-button type="text" @click="saveFn(row)">保存</el-button>
                <el-button type="text" style="color: #f56c6c" @click="cancelFn(row)">取消</el-button>
              </div>

            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <!--分页控件-->
      <el-row :gutter="20" class="mt10">
        <el-col :span="12" :offset="6" align="center">
          <el-pagination background layout="total, prev, pager, next" :total="param.total"
                         :page-size="param.size"
                         :current-page="param.page" @current-change="pageChange">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

  </div>
</template>


<script>
import {delGroup, getGroups, saveGroup} from '@/api';

export default {
  name: "index",
  components: {},
  data() {
    return {
      groupList: [],
      groupName: "",
      loading: false,
      param: {
        id: '',
        total: 0,
        size: 10,
        page: 1
      },
      groupIds: [],
      group: {
        name: '',
        type: '0'
      },
      groupTypes: [
        {
          id: 1,
          name: "集团",
        },
        {
          id: 2,
          name: "分公司",
        },
        {
          id: 3,
          name: "车队",
        },
      ],
      plus: true,
    }
  },
  created() {
    this.getGroupsFn(this.param)
  },
  methods: {
    getGroupsFn(param) {
      this.loading = true
      getGroups(param).then(res => {
        if (res != null && res.code == 200) {
          this.groupList = res.data.list;
          this.param.total = res.data.count;
          this.groupList.forEach(item => item.typeName = this.getTypeName(item.type))
        } else {
          this.$message.info(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getTypeName(type) {
      switch (type) {
        case 0:
          return "未知";
        case 1:
          return "集团";
        case 2:
          return "分公司";
        case 3:
          return "车队";
      }
      return "未知"
    },
    handleSelectionChange(val) {
      this.groupIds = val.map(item => item.id)
      var els = document.querySelectorAll(".el-table-column--selection");
      let hasChecked = els[5].querySelector(".el-checkbox__inner").parentElement.classList.contains("is-checked")
      if (hasChecked) {
        document.querySelectorAll(".el-checkbox__inner").forEach(el => {
          this.checkRemove(el)
        })
      } else {
        document.querySelectorAll(".el-checkbox__inner").forEach(el => {
          this.checkAdd(el)
        })
      }

    },
    checkAll(e) {
      alert(e)
      let accountCheck = this.$refs.accountCheck
      if (e.target.checked) {
        for (let i = 0; i < accountCheck.length; i++) {
          accountCheck[i].checked = true
          this.checkVal.push(accountCheck[i].value)
        }
      } else {
        for (let i = 0; i < accountCheck.length; i++) {
          accountCheck[i].checked = false
          this.checkVal = []
        }
      }
    },
    cellChange(row, column, cell, event) {
      let classList = event.target.classList
      let el = event.target.querySelector(".plus")
      if (classList.contains("plus") || el != null) {
        this.plus = false
        if (row.plus) {
          row.plus = !row.plus
          row.flag = true
          /*获取子分组信息*/
          this.param.id = row.id
          getGroups(this.param).then(res => {
            if (res.data && res.data.list.length > 0) {
              this.$router.push({
                path: "/group/edit2",
                query: {group: row, menuName: row.name}
              })
            }
          })
        }
      }
    },

    //删除分组
    delGroupFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGroup(id).then(res => {
          if (res != null && res.code == 200) {
            this.$message.success("删除成功")
            this.getGroupsFn(this.param)
          } else {
            this.$message.info("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    cancelFn(row) {
      row.flag = !row.flag
      // 重新查询
      this.param.id = ""
      this.getGroupsFn(this.param)
    },
    addSubRole(row) {
      // to="{path:'group/edit2', query:{group:row,menuName:'编辑角色'}}"

      /*获取子分组信息*/
      this.param.id = row.id
      this.plus = false
      this.$router.push({
        path: "/group/edit2",
        query: {group: row, menuName: row.name}
      })
    },
    saveFn(row) {
      // 设置分组类型
      let typeName = this.getTypeName(row.type);
      row.typeName = typeName
      // 改变显示
      row.flag = !row.flag
      saveGroup(row).then(res => {
        if (res != null && res.code == 200) {
          this.$message.success("操作成功")
          this.param.id = ""
          this.getGroupsFn(this.param)
        } else {
          this.$message.info("操作失败")
        }
      })
    },
    // 分组类型下拉发生改变
    dropChange(row) {
      // 改变 row的值
    },

    //添加分组
    addFn() {
      let item = {
        flag: false,
        name: "XXXX",
        type: 1,
        typeName: "",
        id: 0,
        parentId: 0,
      }
      this.groupList.push(item)
    },


    //批量删除分组
    delGroupsFn() {
      if (this.groupIds.length != 0) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          try {
            this.groupIds.forEach(id => {
              delGroup(id)
            })
            this.$message.success('删除成功')
          } catch (e) {
          } finally {
            this.loading = false
            this.getGroupsFn(this.param)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },

    pageChange(page) {
      this.param.page = page;
      this.getGroupsFn(this.param);
    },

    indexMethod(index) {
      this.index = index + (this.param.page - 1) * 10 + 1;
      return index + (this.param.page - 1) * 10 + 1;
    },

    checkSwitch(e) {
      if (e.parentElement.classList.contains("is-checked")) {
        e.parentElement.classList.remove("is-checked")
      } else {
        e.parentElement.classList.add("is-checked")
      }
    },
    checkAdd(e) {
      e.parentElement.classList.add("is-checked")
    },
    checkRemove(e) {
      e.parentElement.classList.remove("is-checked")
    },

    checkMethod(event, index) {
      let e = event.target
      if (e.parentElement.classList.contains("is-checked")) {
        e.parentElement.classList.remove("is-checked")
        this.groupIds.splice(index - 1, 1)

      } else {
        e.parentElement.classList.add("is-checked")
        this.groupIds[index - 1] = this.groupList[index - 1].id
      }
      let checkeds = document.querySelectorAll(".mydeal");
      let b = 0
      checkeds.forEach(item => {
        if (item.classList.contains("is-checked")) {
          b = b + 1;
        }
      })
      let els = document.querySelectorAll(".el-table-column--selection");
      if (b == this.groupList.length || b - 8 == this.groupList.length) {
        //全选
        this.checkSwitch(els[5].querySelector(".el-checkbox__inner"))
      } else if (b < this.groupList.length || b - 8 < this.groupList.length) {
        this.checkRemove(els[5].querySelector(".el-checkbox__inner"))
      }
    }
  }
}
</script>


<style>
.plus {
  margin-left: 5px;
}

.input-text > input {
  text-align: center;
}


i.el-icon-circle-plus-outline.plus {
  position: absolute;
  left: 50px;
  top: 20px;
}

i.el-icon-remove-outline.plus {
  position: absolute;
  left: 50px;
  top: 20px;
}

.select-text input {
  text-align: center;
}

.checkBox {
  display: inline-block;
  position: relative;
  border: 1px solid #DCDFE6 !important;
  border-radius: 2px;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  width: 14px;
  height: 14px;
  right: 10px;
  background-color: #FFF !important;
  z-index: 1;
  left: 5px;
}

.span-align-checkbox {
  vertical-align: middle;
  margin-left: 6px;
}

span.checkbox {
  position: relative;
  left: 5px;
  top: -1px;
}

/*.el-checkbox__inner::before {
    content: '';
    position: absolute;
    display: block;
    background-color: #FFF;
    height: 2px;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    left: 0;
    right: 0;
    top: 5px;
}*/
</style>
